<template>
	<view class="container">
		<!-- 导航栏 -->
		<u-navbar
			title="商品分类"
			:title-bold="true"
			title-color="#000"
			:border-bottom="false"
			custom-class="home-bg"
			:background="{ background: 'transparent' }"
			:is-back="false"
		></u-navbar>

		<!-- 搜索区域 -->
		<view class="Search-u" @click="tapSearch">
			<Search pageTitle="搜索" placeholder="快搜索你想要的商品吧~" color="#F05A39" @search="searchStore" @clear="clear"></Search>
		</view>

		<!-- 分类和商品内容区 -->
		<view class="content-container">
			<!-- 左侧分类导航（独立滚动） -->
			<scroll-view class="category-nav" scroll-y>
				<view v-for="(item, index) in categories" :key="index" class="category-item" :class="{ active: activeCategory === index }" @click="selectCategory(index, item)">
					<text>{{ item.classifyName }}</text>
				</view>
			</scroll-view>

			<!-- 右侧商品展示区（独立滚动） -->
			<scroll-view class="products-container" scroll-y @scrolltolower="loadMore" :scroll-top="scrollTop" @scroll="scrollHandler" ref="productScroll">
				<view class="section-title">{{ categories[activeCategory] ? categories[activeCategory].classifyName : '' }}</view>
				<u-grid :col="2" :border="false">
					<u-grid-item bg-color="transparent" v-for="(product, index) in products" :key="index" @click="viewProductDetail(product)">
						<view class="product-card">
							<image class="product-image" :src="path + product.goodImg.split(',')[0]" mode="aspectFill"></image>
							<view class="product-info" style="position: relative">
								<view class="product-title">
									{{ product.goodName }}
								</view>
								<view class="subsidized-goods" v-if="product.goodType == 2">
									<image src="/static/main/jtsp.png"></image>
								</view>
								<view class="product-price">¥{{ product.todayPrice }}</view>
							</view>
						</view>
					</u-grid-item>
				</u-grid>

				<!-- 加载更多提示 -->
				<x-loading-more :loadingMore="loadingMore"></x-loading-more>
				<!-- 无订单展示 -->
				<view v-if="products.length === 0" class="no-products">
					<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="该分类下暂无商品"></u-empty>
				</view>
			</scroll-view>

			<x-back-top ref="backTopRef" @scrollToTop="scrollToTop"></x-back-top>
		</view>
	</view>
</template>

<script>
import Search from '@/components/you-search/index.vue';
import main from '@/api/main.js';
import api from '@/api/index.js';
export default {
	components: {
		Search
	},
	data() {
		return {
			path: api.getPath(),
			activeTab: 1, // 默认选中分类页
			activeCategory: 0, // 默认选中全部分类
			loadingMore: false,
			scrollTop: 0,
			categories: [],
			products: [],
			pageNum: 1,
			pageSize: 10,
			total: 0,
			catId: 0
		};
	},
	async onShow() {
		await this.getLsit();
		this.catId = this.categories[this.activeCategory].id;
		await this.loadProducts();
	},
	onPullDownRefresh() {
		// 重置页码
		this.pageNum = 1;

		//重新获取数据
		Promise.all([this.getLsit(), this.loadProducts()]).finally(() => {
			// 停止下拉刷新动画
			uni.stopPullDownRefresh();
		});
	},
	methods: {
		// 选择分类
		selectCategory(index, row) {
			this.activeCategory = index;
			this.catId = row.id;
			// 实际项目中这里应调用API获取该分类下的商品
			this.loadProducts();

			this.scrollToTop();
		},
		// 滚动到顶部
		scrollToTop() {
			this.scrollTop = 0; // 重置滚动位置
		},
		// 监听滚动事件
		scrollHandler(e) {
			// 更新scrollTop的值
			this.scrollTop = e.detail.scrollTop;
			this.$refs.backTopRef?.triggerHandleScroll(e);
		},
		// 加载商品数据
		async loadProducts() {
			// 模拟请求API获取商品数据
			this.loadingMore = true;
			let _this = this;
			const res = await main.getGood({
				goodClassify: _this.catId,
				pageNum: _this.pageNum,
				pageSize: _this.pageSize,
				goodName: _this.searchName
			});
			_this.products = res.rows;
			_this.total = res.total;
			_this.loadingMore = false;
		},

		// 加载更多
		loadMore() {
			if (!this.loadingMore) {
				this.loadingMore = true;
				// 模拟请求更多数据
				if (this.total > this.pageNum * this.pageSize) {
					this.pageNum++;
				} else {
					this.loadingMore = false;
					return;
				}

				let _this = this;
				main.getGood({
					goodClassify: _this.catId,
					pageNum: _this.pageNum,
					pageSize: _this.pageSize,
					goodName: _this.searchName,
				})
					.then((res) => {
						_this.products = [...this.products, ...res.rows];
						_this.total = res.total;
						_this.loadingMore = false;
					})
					.catch((erro) => {
						console.log(erro);
					});
			}
		},
		async getLsit() {
			this.loadingMore = true;
			const res = await main.getList();
			this.categories = res.rows;
			this.loadingMore = false;
		},
		// 查看商品详情
		viewProductDetail(product) {
			uni.navigateTo({
				url: `/pages/goods_details/goods_details?id=${product.id}`
			});
		},
		tapSearch() {
			uni.navigateTo({
				url: '/pages/index/indexSearch'
			});
		}
	}
	// onReady() {
	// 	// 设置顶部导航栏透明
	// 	uni.setNavigationBarColor({
	// 		frontColor: '#ffffff',
	// 		backgroundColor: 'transparent',
	// 		animation: {
	// 			duration: 400,
	// 			timingFunc: 'easeIn'
	// 		}
	// 	});
	// }
};
</script>

<style lang="scss" scoped>
.subsidized-goods {
	position: absolute;
	right: 10rpx;
	bottom: 10rpx;
}
.container {
	background: linear-gradient(180deg, #fa6c43 0%, transparent 15%);
	height: calc(100vh - 100rpx);
	display: flex;
	flex-direction: column;
	overflow: hidden; /* 关键：禁止整个页面滚动 */
}

.Search-u {
	margin: 20rpx 0;
	flex-shrink: 0; /* 禁止搜索框缩放 */
}

/* 内容容器使用flex布局 */
.content-container {
	flex: 1;
	display: flex;
	overflow: hidden; /* 禁止容器自身滚动 */
}

.category-nav {
	width: 190rpx;
	background-color: #f9f9f9;
	border-radius: 30rpx;

	/* 关键：独立滚动区域 */
	height: 100%;
	overflow-y: auto;

	.category-item {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #666;
		position: relative;

		&.active {
			background-color: #ffffff;
			color: #ff3a3a;
			font-weight: bold;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 32%;
				width: 10rpx;
				height: 36%;
				background-color: #ff3a3a;
				border-radius: 5rpx;
			}
		}
	}
}

.products-container {
	flex: 1;

	/* 关键：独立滚动区域 */
	height: 100%;
	overflow-y: auto;
	box-sizing: border-box;
	padding: 10rpx 10rpx 30rpx 0;

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		padding: 20rpx 20rpx 10rpx;
		color: #333;
	}

	.product-card {
		padding: 15rpx;
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);

		.product-image {
			width: 100%;
			height: 200rpx;
			background-color: #f8f8f8;
			border-radius: 20rpx;
		}

		.product-info {
			padding: 20rpx 0;
			width: calc((100vw - 190rpx) / 2 - 30rpx);

			.product-title {
				font-size: 26rpx;
				color: #333;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				margin-bottom: 15rpx;
				line-height: 1.5;
			}

			.product-price {
				color: #ff3a3a;
				font-size: 30rpx;
				font-weight: bold;
			}
		}
	}
	.no-products {
		padding: 100rpx 0;
	}
}
</style>
